<!DOCTYPE html>
<html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Document</title>
       <style>
           *{
               margin: 0px;
               padding: 0px;
               list-style:none;
           }
           .header{
               height: 76px;
               background: url('images/bg.jpg') repeat-x;
           }
           .banner{
               height: 430px;
               background:gray;
               border-bottom:1px solid red;
           }
           .con{
               width: 966px;
               height: 379px;
               background:lime;
               margin:47px auto 31px;
           }
           .footer{
               height: 50px;
               width: 968px;
               margin:0px auto;
               background:gold;
               border-top: 1px solid blue;
           }
           .nav{
               width: 958px;
               height:74px ;
               margin:0px auto
           }
           .wrap{
               width: 958px;
               height:426px ;
               margin:0px auto
           }
           .wrap .left{
               float: left;
           }
           .wrap .right{
               float: right;;
           }
           .left h4{
               font-size: 30px;
               margin-top: 10px;
           }
           .left .list li{
               font-size: 14px;
               margin-top: 4px;
           }
           .nav h1{
               float: left;
           }
           .nav ul {
               float: right;
           }
           .nav li{
              float: left; 
           }
           .nav img{
               height: 45px;
               margin-top: 15px;
           }
           .nav li{
               padding:10px 11px;
               margin-right: 2px;
               margin-top:22px;
               cursor:pointer;
           }
           .nav li:hover{
               border-radius: 20px;
               background:linear-gradient(#3a3a3a,#090909)
           }
           .nav a{
               font-size: 14px;
               font-weight: bold;
               text-decoration: none;
               color:white;
           }
            .wrap h4{
                margin-top:57px;
                margin-bottom: 12px;
            }
            .wrap .list li{
                line-height: 30px;
            }
            .wrap .cc li{
               line-height: 25px;
            }
            .wrap .cc a{
                text-decoration: none;
                font-size: 14px;   
            }
            .con .left{
                float: left;
            }
            .con .right{
                float: right;
            }
            .con .left li{
                float: left;
                width: 220px;
            }
            .con .left .last{
                width: 192px;
            }
            .footer .left{
                float: left;
            }
            .footer .right{
                float: right;
            }
            .footer .bottom{
                width:968px;
                float: left;
            }
       </style>
   </head>
   <body>
       <div class="header">
           <div class="nav">
               <h1>
                   <a href="">
                       <img src="images/log.png" alt="">
                   </a>
               </h1>
               <ul>
                   <li>
                       <a href="">
                           首页
                       </a>
                   </li>
                   <li>
                       <a href="">
                           首页
                       </a>
                   </li>
                   <li>
                       <a href="">
                           首页
                       </a>
                   </li><li>
                       <a href="">
                           首页
                       </a>
                   </li><li>
                       <a href="">
                           首页
                       </a>
                   </li>
               </ul>
           </div>
       </div>
       <div class="banner">
           <div class="wrap">
               <div class="left">
                   <h4>微信，是一个生活方式</h4>
                   <ul class="list">
                       <li>超过十亿人使用的手机应用</li>
                   </ul>
                   <img src="images/down.png" alt="">
                   <ul class="cc">
                       <li>
                           <a href="">
                               超过十亿人使用的手机应用
                           </a>
                       </li>
                   </ul>
               </div>
               <img src="images/com.png" alt="" class="right">
           </div>
       </div>
       <div class="con">
           <div class="left">
               <img src="images/list.png" alt="">
               <ul>
                   <li>
                       <h6>微信网页版</h6>
                       <p>扫一扫二维码</p>
                       <p>就能在浏览器上使用微信</p>
                       <a href="">了解更多</a>
                   </li>
                   <li>
                       <h6>微信网页版</h6>
                       <p>扫一扫二维码</p>
                       <p>就能在浏览器上使用微信</p>
                       <a href="">了解更多</a>
                   </li>
                   <li class="last">
                       <h6>微信网页版</h6>
                       <p>扫一扫二维码</p>
                       <p>就能在浏览器上使用微信</p>
                       <a href="">了解更多</a>
                   </li>
               </ul>
           </div>
           <div class="right">
               <h6>最新消息</h6>
               <ul>
                   <li>微信 8.0.2 for Android 正式版发布<span>03=29</span></li>
               </ul>
           </div>
       </div>
       <div class="footer">
           <p class="left">左边</p>
           <p class="right">右边</p>
           <p class="bottom">下边</p>
       </div>
   </body>
</html>